/* 
  思路：
    1. 读取index.html文件的内容
    2. 获取到内容中css部分 style标签部分的内容
    3. 把css生成到 demo/index.css
    4. 获取到内容中js部分 script的内容
    5. 生成到 demo/index.js
    6. 把其余的内容生成到  demo/index.html
*/
const fs = require('fs')
const path = require('path')

const cssReg = /<style>([\s\S]*)<\/style>/
const jsReg = /<script>([\s\S]*)<\/script>/
function mackCss(data) {
  const result = cssReg.exec(data)
  // 写入到 demo/index.css中
  fs.writeFile(path.join(__dirname, 'demo', 'index.css'), result[1], (err) => {
    if (err) return console.log(err)
    console.log('css写入成功')
  })
}

function mackJs(data) {
  const result = jsReg.exec(data)
  // 写入到 demo/index.css中
  fs.writeFile(path.join(__dirname, 'demo', 'index.js'), result[1], (err) => {
    if (err) return console.log(err)
    console.log('js写入成功')
  })
}

function maskHtml(data) {
  // 需要把data的style标签替换成 link
  data = data.replace(cssReg, `<link rel="stylesheet" href="./index.css">`)
  data = data.replace(jsReg, `<script src="./index.js"></script>`)
  fs.writeFile(path.join(__dirname, 'demo', 'index.html'), data, (err) => {
    if (err) return console.log(err)
    console.log('html写入成功')
  })
}

fs.readFile(path.join(__dirname, 'index.html'), 'utf8', (err, data) => {
  if (err) return console.log(err)

  mackCss(data)
  mackJs(data)
  maskHtml(data)
})
